<template>
  <div id="a">
    <div class="b">
      <div class="bb">
        <img class="c" src="" alt="" />
        <span class="d">{{ $route.meta.title }}</span>
        <div class="dd"></div>
      </div>
    </div>
    <div class="flt">
      <van-search  placeholder="请输入搜索关键词" />
    </div>
    <ul>
      <li class="one">综合推荐</li>
      <li>销量</li>
      <li>价格</li>
      <li>评价</li>
      <li>店铺</li>
      <li>筛选</li>
    </ul>
    <button>筛选11.11大促商品</button>

    <van-card 
      v-for='item in goodslist'
      :key="item.id"
      num="1"
      @click="gogoodsdetails(item.id)"
      :price="item.price"
      :origin-price="item.market_price"
      desc="敏感肌可用，控油祛痘、男女可用..."
      :title="item.goodsname"
      :thumb="item.img"
    >
      <template #tags>
        <van-tag plain type="danger">11.11限时299起</van-tag>
      </template>
    </van-card>
    <!-- <van-card @click="gogoodsdetails()"
      price="999.00"
      origin-price="1099.00"
      desc="净透毛孔，温和不紧绷，清爽控油"
      title="敏感肌可用，控油祛痘、男女可用..."
      :thumb="img3"
    >
      <template #tags>
        <van-tag plain type="danger">11.11限时299起</van-tag>
      </template>
    </van-card>
    <van-card @click="gogoodsdetails()"
      price="999.00"
      origin-price="1099.00"
      desc="深层清洁肌肤，温和又滋润，日本..."
      title="水肌美净肤洁面膏 100g/支 深..."
      :thumb="img4"
    >
      <template #tags>
        <van-tag plain type="danger">11.11限时299起</van-tag>
      </template>
    </van-card>
    <van-card @click="gogoodsdetails()"
      price="999.00"
      origin-price="1099.00"
      desc="击退油光，净在掌握，有效控油..."
      title="多芬男士+护理净油洁面泡沫2..."
      :thumb="img5"
    >
      <template #tags>
        <van-tag plain type="danger">11.11限时299起</van-tag>
      </template>
    </van-card>
    <van-card  @click="gogoodsdetails()"
      price="999.00"
      origin-price="1099.00"
      desc="懒人必备的四效合一卸妆水，舒缓..."
      title="贝德玛温和卸妆水 粉水、蓝水..."
      :thumb="img5"
    >
      <template #tags>
        <van-tag plain type="danger">11.11限时299起</van-tag>
      </template>
    </van-card> -->
  </div>
</template>

<script>
import {getCateList} from '../util/request/api'
export default {
  data() {
    return {
      goodslist:[]
    };
  },
  mounted(){
    getCateList({
      type:2,
      cateid:this.$route.query.cateid
    }).then((res)=>{
      if(res.data.code==200){
        this.goodslist=res.data.list.goodData?
        res.data.list.goodData :[]
      }
    })
  },
  methods:{
    gogoodsdetails(id){
      this.$router.push({
        path:'/goodsdetails',
        query:{
          id
        }
      });
    }
  }
};
</script>

<style  scoped>
.c {
  position: relative;
  top: 0.03rem;
}
ul {
  display: flex;
  justify-content: space-around;
  font-size: 0.14rem;
  color: #fff3f2;
  background-color: tomato;
  height: 0.3rem;
  line-height: 0.3rem;
  font-family: PingFangSC-Semibold;
}
.one {
  font-size: 0.16rem;
  color: #fff;
}
button {
  width: 3.55rem;
  height: 0.32rem;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  background-color: #fff4f2;
  color: #ff6040;
  border: 0 solid #ff6040;
  font-size: 0.16rem;
  border-radius: 2px;
}
.van-card {
  font-family: PingFangSC-Regular;
  color: #333333;
}
</style>
